<!--
  * 订单编辑弹窗
  *
  * @Author:    1024创新实验室-主任：卓大
  * @Date:      2022-09-03 21:35:00
  * @Wechat:    zhuda1024
  * @Email:     lab1024@163.com
  * @Copyright  1024创新实验室 （ https://1024lab.net ），Since 2012
-->
<template>
  <a-modal
    :title="'编辑订单'"
    :open="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :confirmLoading="confirmLoading"
  >
    <a-form
      ref="formRef"
      :model="form"
      :rules="rules"
      :label-col="{ span: 6 }"
      :wrapper-col="{ span: 16 }"
    >
      <a-form-item label="订单号" name="orderNo">
        <a-input v-model:value="form.orderNo" placeholder="请输入订单号" />
      </a-form-item>

      <a-form-item label="物流单号" name="logisticsNo">
        <a-input v-model:value="form.logisticsNo" placeholder="请输入物流单号" />
      </a-form-item>

      <a-form-item label="娃娃ID" name="dollNo">
        <a-input v-model:value="form.dollNo" placeholder="请输入娃娃ID" />
      </a-form-item>

      <a-form-item label="娃娘姓名" name="dollName">
        <a-input v-model:value="form.dollName" placeholder="请输入娃娘姓名" />
      </a-form-item>

      <a-form-item label="娃娘手机" name="dollPhone">
        <a-input v-model:value="form.dollPhone" placeholder="请输入娃娘手机号" />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { message } from 'ant-design-vue';
import { orderApi } from '/@/api/business/bjd/order-api';

const visible = ref(false);
const confirmLoading = ref(false);
const formRef = ref();
const emit = defineEmits(['success']);

const form = reactive({
  id:undefined,
  orderNo: '',
  logisticsNo: '',
  dollNo: '',
  dollName: '',
  dollPhone: '',
});

const rules = {
  logisticsNo: [{ required: true, message: '请输入物流单号', trigger: 'blur' }],
  dollNo: [{ required: true, message: '请输入娃娃ID', trigger: 'blur' }],
  dollName: [{ required: true, message: '请输入娃娘姓名', trigger: 'blur' }],
  dollPhone: [{ required: true, message: '请输入娃娘手机号', trigger: 'blur' }],
};

// 打开模态框
const open = (record) => {
  form.orderNo = record.orderNo;
  form.logisticsNo = record.logisticsNo || '';
  form.dollNo = record.dollNo || '';
  form.dollName = record.dollName || '';
  form.dollPhone = record.dollPhone || '';
  form.id = record.id;
  visible.value = true;
};

// 提交表单
const handleOk = () => {
  formRef.value.validate().then(async () => {
    try {
      confirmLoading.value = true;
      const res = await orderApi.update(form);
      if (res.ok) {
        message.success('修改成功');
        handleCancel();
        emit('success');
      }
    } finally {
      confirmLoading.value = false;
    }
  }).catch((error) => {
    console.log('验证失败', error);
  });
};

// 关闭模态框
const handleCancel = () => {
  visible.value = false;
  formRef.value.resetFields();
};

// 暴露方法给父组件
defineExpose({
  open,
});

</script>